<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="../css/coupon.css" />
</head>
<body class="gray">
	<div class="mui-content loading" >
	    <div class="mui-content-padded" id="vueMain">
	    		<div v-if="coupon.length==0">
	    			<p style="padding: 0 50px; text-align: center;">无优惠券可用</p>
	    		</div>
	    		<div v-else class="coupon">
	    			<template v-for="item in coupon">
	    				<div class="item" :data-id="item.id">
						<div class="mui-pull-left media">
							<img src="../icon/coupon-active@2x.png" alt="" />
							<div class="media-text">
								<div class="cir">
									<div><span>¥</span><span>{{item.value}}</span></div>
									<p>满{{item.consume_money}}元使用</p>
								</div>
								
							</div>
						</div>
						<div class="coupon-text">
							<div>
								<h3>{{item.name}}</h3>
								<p>{{item.intro}}</p>
								<p>{{item.start_time}}-{{item.end_time}}</p>
							</div>
						</div>
					</div>
	    			</template>
	    			<div style="margin:20px auto; text-align: center;">
	    				<button type="button" class="mui-btn mui-btn-danger">不使用优惠券</button>
	    			</div>
			</div>
		</div>
	</div>

<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps, views;
	mui.init()
	mui.plusReady(function () {
		views = bexta.getWebview();
//		bexta.jsonToString(views.coupon)
		apps = new Vue({
			el:"#vueMain",
			data:{
				coupon:views.coupon
			},
			mounted:function(){
				document.querySelector('.loading').classList.add('loadRun');
				mui('#vueMain').on('tap', '.mui-btn', function(){
					mui.fire(views.opener(), 'selCoupon', {
						id:-1
					});
					mui.back();
				});
				mui('#vueMain').on('tap', '.item', function(){
					var cid = this.getAttribute('data-id');
					mui.fire(views.opener(), 'selCoupon', {
						id:cid
					});
					mui.back();
				});
				
			}
		})

	});
</script>
</body>
</html>